<!-- createdOrder -->
<style lang="scss" scoped>
   @import '~assets/common/css/mixin.scss';
   .pagePay {
      .my-header {
         padding: $padding;
         background: #fff;
         @include flexbox(space-between, center, row, nowrap);
         border-bottom: 1px solid #eee;
         .back {
            display: block;
            width: .65rem;
            height: .65rem;
            background: url('~assets/common/images/arrow-left.png') no-repeat;
            background-size: 100%;
         }
         strong {
            font-size: 18px;
            font-weight: normal;
            color: #333;
         }
         .myMsg {
            display: block;
            background: url('~assets/common/images/searchIcon.png') no-repeat;
            background-size: 600% 100%;
            height: .65rem;
            width: .65rem;
            opacity: 0;
            background-position: -2.6rem 0;
         }
      }
      .payContainer {
         .addressContainer {
            background: #fff;
            .addressDefault {
               padding: $padding;
               background: url('~assets/common/images/addressbg.png') repeat-x bottom;
               background-size: 64px 5px;
               position: relative;
            }
            .arrow-right {
               display: block;
               position: absolute;
               right: 10px;
               top: 50%;
               margin-top: -.25rem;
               width: .45rem;
               height: .45rem;
               background: url('~assets/common/images/arrow-right.png') no-repeat;
               background-size:auto 100%;
            }
            .cell {
               strong {
                  font-size: 16px;
               }
               font-size: 14px;
               padding: 5px 0;
               margin-right:.45rem;
            }
            .defaultIcon {
               color: $red;
               border: 1px solid $red;
               border-radius: 5px;
               padding: 0px 3px;
            }
            .positionIcon {
               display: inline-block;
               background: url('~assets/common/images/product-detail-sprites-mjs.png') no-repeat;
               width: 25px;
               height: 25px;
               background-position: -17px 2px;
               background-size: 150px;
               vertical-align: -8px;
            }
         }
         .venderOrderList {
            margin-top: $margin;
            .venderItem {
               .sizeItem {
                  padding: $padding;
                  border-bottom: 1px solid #eee;
                  background: #fff;
                  @include flexbox(space-between,
                  center,
                  row,
                  nowrap);
                  img {
                     max-width: 1.6rem;
                     max-height: 1.6rem;
                     margin: 10px;
                     border: 1px solid #eee;
                  }
                  .orderInfo {
                     @include flexbox(space-between,
                     center,
                     row,
                     nowrap);
                     font-size: 16px;
                     .info {
                        flex-grow: 1; //决定如何分配剩余空间
                        .title {
                           @include textoverflow(1);
                           margin-bottom: 10px;
                        }
                        p {
                           color: #999999;
                           margin-bottom: 10px;
                           font-size: 14px;
                        }
                     }
                  }
                  .price {
                     .fee {
                        margin-bottom: 10px;
                        color: $red;
                     }
                     .original-price {
                        text-decoration: line-through;
                     }
                     p {
                        width: 70px;
                        color: #999999;
                        margin-bottom: 10px;
                        font-size: 14px;
                        text-align: right;
                     }
                  }
               }
            }
            .amountInfo {
               padding: $padding;
               background: #ffffff;
               border-bottom: 1px solid #eee;
               .total-amount {
                  color: $red;
               }
               li {
                  @include flexbox(space-between,
                  center,
                  row,
                  nowrap); // width: 4rem;
                  line-height: 30px;
               }
            }
            .address-from {
               background: #fff;
               .cell-from-item {
                  @include flexbox(flex-start,
                  center,
                  row,
                  nowrap);
                  padding: 15px $padding;
                  border-bottom: 1px solid #eee;
                  .title {
                     font-size: $subtitle;
                     color: #333;
                     white-space: nowrap;
                  }
                  .content {
                     width: 70%;
                     @include placeholderColor($gray);
                     input {
                        width: 100%;
                        border: none;
                        outline: none;
                        box-shadow: none;
                        text-shadow: none;
                        text-align: left;
                        font-size: $subtitle;
                        color: #333;
                        line-height: 24px;
                     }
                  }
               }
            }
         }
      }
      .payOnline {
         position: fixed;
         bottom: 0;
         left: 0;
         right: 0;
         width: 100%;
         background: #fff;
         font-size: 17px;
         @include flexbox(space-between,
         center,
         row,
         nowrap);
         span {
            color: $red;
            padding: 0 $padding;
         }
         .payBtn {
            width: 40%;
            height: 100%;
            color: #fff;
            padding: 15px;
            background: #FF5959;
            text-align: center;
         }
      }
      .nav-hide {
         position: static!important;
      }
   }

   .paymentLoading {
      position: fixed;
      @include flexbox(center,
      center,
      row,
      nowrap);
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      img {
         background: rgba(0, 0, 0, .6);
         width: 3rem;
      }
   }

   .paymentContainer {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, .4);
      @include flexbox(center,
      center,
      row,
      nowrap);
      .content {
         width: 85%;
         background: #fff;
         border-radius: 10px;
         >button {
            width: 60%;
            margin: 20px auto;
            background: $red;
         }
         >a {
            margin: 5px 0;
            padding: 0 15px;
         }
         .title {
            @include flexbox(center,
            center,
            row,
            nowrap);
            position: relative;
            padding: 15px;
            border-bottom: 1px solid #eee;
            strong {
               font-size: 20px;
            }
            .closeIcon {
               display: block;
               background: url('~assets/common/images/product-detail-sprites-mjs.png') no-repeat;
               width: 25px;
               height: 25px;
               background-position: -38px -19px;
               background-size: 150px;
               vertical-align: -8px;
               position: absolute;
               left: 10px;
            }
         }
         .paymentInfo {
            padding: 15px;
            border-bottom: 1px solid #eee;
            @include flexbox(flex-start,
            center,
            column,
            wrap);
            font-size: 20px;
            span {}
            strong {
               font-size: 40px;
               font-weight: 400;
               margin: 10px 0 0;
            }
         }
      }
   }

   .addressList {
      .my-header {
         padding: $padding;
         background: #fff;
         @include flexbox(space-between,
         center,
         row,
         nowrap);
         border-bottom: 1px solid #eee;
         .back {
            display: block;
            width: .65rem;
            height: .65rem;
            background: url('~assets/common/images/arrow-left.png') no-repeat;
            background-size: 100%;
         }
         strong {
            font-size: 18px;
            font-weight: normal;
            color: #333;
         }
         .myMsg {
            display: block;
            background: url('~assets/common/images/searchIcon.png') no-repeat;
            background-size: 600% 100%;
            height: .65rem;
            width: .65rem;
            opacity: 0;
            background-position: -2.6rem 0;
         }
      }
      .addNewAddressbtn {
         position: fixed;
         bottom: .2rem;
         width: 90%;
         text-align: center;
         padding: $padding 0;
         background: $red;
         font-size: $title;
         color: #fff;
         margin: 0 .5rem;
         border-radius: 2px;
         z-index: 2000;
      }
      .address-container {
         box-sizing: content-box;
         padding-bottom: 100px;
         background: #fff;
         .address-item {
            @include flexbox(space-between,
            flex-start,
            column,
            wrap);
            background: #fff;
            padding-left: 60px;
            position: relative;
            .selectedIcon {
               display: inline-block;
               position: absolute;
               left: 15px;
               top: calc(100%/2 - 12.5px);
               background: url('~assets/common/images/product-detail-sprites-mjs.png') no-repeat;
               width: 25px;
               height: 25px;
               background-position: -93px -24px;
               background-size: 140px;
               vertical-align: -8px;
            }
            >p {
               width: 100%;
            }
            .name {
               font-size: $title;
               color: #333;
               padding: $padding 0;
               @include textoverflow(1);
            }
            .address {
               font-size: $smsub;
               color: $gray;
               padding: 0 0 15px;
               @include textoverflow(2);
               border-bottom: 1px solid #eee;
            }
            .address-status {
               position: absolute;
               padding: $padding 0;
               right: 10px;
               .right {
                  @include flexbox(space-between,
                  center,
                  row,
                  nowrap); // width: 4rem;
                  flex: initial;
                  font-size: $subtitle;
                  color: $gray;
                  letter-spacing: 1px;
                  >div {
                     margin-right: 10px;
                     @include flexbox(space-between,
                     center,
                     row,
                     nowrap);
                     i {
                        margin-right: 5px;
                     }
                  }
                  .edit {
                     .edit-address-icon {
                        display: block;
                        @include wh(16px,
                        16px);
                        @include bg('~assets/common/images/edit.png');
                     }
                  }
               }
            }
         }
      }
   }
</style>
<style lang="scss">
   .paymentContainer .mint-cell-wrapper {
      background-image: none;
   }
</style>
<template>
   <div class="pagePay">
      <div class="my-header">
         <i class="back" @click="$router.go(-1)"></i>
         <strong>确认订单</strong>
         <i class="myMsg"></i>
      </div>
      <div class="payContainer">
         <div class="addressContainer" v-if="defaultAddress" @click="()=>visiblePopup.selectedAdressVisible=true">
            <div class="addressDefault">
               <div class="cell">
                  <strong>{{defaultAddress.receiver}} {{defaultAddress.phone}}</strong>
                  <span class="defaultIcon" v-if="defaultAddress.isDefault===1">默认</span>
               </div>
               <div class="cell">
                  <i class="positionIcon"></i>{{defaultAddress.provinceName + defaultAddress.cityName + defaultAddress.areaName}}&nbsp;&nbsp;{{
                  defaultAddress.address}}
               </div>
               <i class="arrow-right"></i>
            </div>
         </div>
         <div class="addressContainer" v-if="!defaultAddress" @click="()=>visiblePopup.selectedAdressVisible=true">
            <div class="addressDefault">
               <div class="cell">
                  <i class="positionIcon"></i> 新建地址
               </div>
               <i class="arrow-right"></i>
            </div>
         </div>
         <div class="venderOrderList" v-if="confirmSelectedProduct">
            <div class="venderItem" v-for="(good,index) in confirmSelectedProduct.goodsList" :key="index">
               <div class="sizeItem" ref='sizeItem' v-for="(size,sizeindex) in good.sizeList" :key="sizeindex">
                  <!--<input type="text" ref='cartId'  v-model="size.cartId">-->
                  <img :src="good.goodsImg|splitImg" alt="">
                  <div class="orderInfo">
                     <div class="info">
                        <p class="title">{{good.sellingPoints}} </p>
                        <p>{{good.brandName}} | {{good.goodsCode}}</p>
                        <p> 尺码：{{size.sizeName}}</p>
                     </div>

                  </div>
                  <div class="price">
                     <p class="fee">&yen;
                        <strong>{{size.discountMoney}}</strong>
                     </p>
                     <p class="original-price">&yen;<i>{{size.goodsMoney}}</i></p>
                     <p class="count">x {{size.cartNum}}</p>
                  </div>
               </div>
            </div>
            <ul class="amountInfo">
               <li><span>  商品总价:   </span><span> ¥ {{confirmSelectedProduct.totalGoodsMoney}}   </span></li>
               <li><span>  运费:   </span><span> ¥ {{confirmSelectedProduct.totalFreight}} </span></li>
               <li class="total-amount"><span> 订单总价：    </span><span> ¥{{totalFee}}    </span></li>
            </ul>
            <div class="address-from">
               <div class="cell-from-item">
                  <span class="title">留言：</span>
                  <div class="content">
                     <input type="text" v-model="orderRemark" placeholder="给卖家留言">
                  </div>
               </div>
            </div>

         </div>
         <p v-else style="text-align:center;padding:15px 0; color:#999;font-size:17px;">
            暂无数据
         </p>
      </div>
      <div class="payOnline" v-bind:class="{  'nav-hide': hideClass }">
         <span>合计：&yen;{{totalFee}}</span>
         <div class="payBtn" @click="submitOrder">提交订单</div>
      </div>
      <mt-popup v-model="visiblePopup.selectedAdressVisible" :closeOnClickModal="true" :modal="false" position="right" class="modal-popup">
         <div class="my-header">
            <i class="back" @click="()=>visiblePopup.selectedAdressVisible=false"></i>
            <strong>选择地址</strong>
            <i class="myMsg"></i>
         </div>
         <div class="addressList">
            <div class="my-header">
               <i class="back" @click="$router.go(-1)"></i>
               <strong>地址管理</strong>
               <i class="myMsg"></i>
            </div>
            <scroller width="100%" height="100%" style="margin-top:1.2rem;background:#fff;z-index:999">
               <div class="address-container" v-if="addressData">
                  <div class="address-item" v-for="(item,index) in addressData" :key="index" @click="selectedAddress(item)">
                     <div class="address-status">
                        <div class="right">
                           <div class="edit" @click="$router.push(`/address/${item.id}`)">
                              <i class="edit-address-icon"></i>
                              <span>编辑</span>
                           </div>
                        </div>
                     </div>
                     <p class="name">{{item.receiver}} {{item.phone}}</p>
                     <p class="address">{{item.provinceName + item.cityName + item.areaName}}&nbsp;;&nbsp;{{item.address}}</p>
                     <i class="selectedIcon" v-if="defaultAddress.id===item.id"></i>
                  </div>
               </div>
            </scroller>
            <div class="addNewAddressbtn" @click="$router.push('/address')">+&nbsp;新建地址</div>
         </div>
      </mt-popup>
   </div>
</template>

<script>
   import {
      Field,
      Button,
      Toast,
      Popup
   } from 'mint-ui';
   import {
      mapGetters
   } from 'vuex'

   import {
      setSessionStorage,
      getSessionStorage,
      removeSessionStorage,
   } from '@/utils/mixin';
   // import wechat from '@/utils/wechat';

   export default {

      data() {
         return {
            defaultAddress: null,
            totalFee: 0.00,
            paymentPassword: null,
            PaymentNo: null,
            confirmSelectedProduct: null,
            addressData: null,
            visiblePopup: {
               selectedAdressVisible: false
            },
            payPassageway: 8, //	订单来源( 8：H5页面)
            orderType: 3, //订单类型(3：分享)
            orderRemark: null,
            confirmSelectedData: {},
            hideClass: false,
            // 默认屏幕高度
            docmHeight: document.documentElement.clientHeight,
            showHeight: document.documentElement.clientHeight,
            goodsImg: ''
         };
      },

      watch: {
         userId(val) {
            if (val != undefined) {
               this.initData();
            }
         },
         showHeight: 'inputType'
      },
      components: {},
      computed: {
         ...mapGetters([
            'userId',
         ])
      },
      methods: {
         // 检测屏幕高度变化
         inputType() {
            if (!this.timer) {
               this.timer = true
               let that = this
               setTimeout(() => {
                  if (that.docmHeight > that.showHeight) {
                     this.hideClass = true;
                  } else if (that.docmHeight <= that.showHeight) {
                     this.hideClass = false;
                  }
                  that.timer = false;
               }, 20)
            }
         },
         selectedAddress(item) {
            this.visiblePopup.selectedAdressVisible = false;
            //标识所有的地址为9
            this.addressData.map(item => item.Selected = 9);
            //标识选中的地址为1
            item.Selected = 1;
            //重新请求地址
            this.initData(item.id);
         },
         async initData(addressId) {
            // if (this.userId == undefined) {
            //    return false
            // }
            let params = {
               userId: this.userId
            }
            //如果是列表里选择的
            if (addressId) {
               params.addressId = addressId
            } else {
               //如果是编辑并保存的
               if (this.$route.query.addressId) {
                  params.addressId = this.$route.query.addressId
               }
            }
             
            await this.$store.dispatch('GetConfirmProduct', params).then(res => {
           
                  this.confirmSelectedProduct = res.data.cartList[0];
                  this.defaultAddress = res.data.addressInfo;
                  if (!this.addressList) {
                     this.addressData = res.data.addressList;
                  } else {
                     this.addressData = this.addressList;
                  }
                  //总金额
                  this.totalFee = parseFloat(this.confirmSelectedProduct.totalFreight) + parseFloat(this.confirmSelectedProduct
                     .totalGoodsMoney);
                  this.totalFee = this.totalFee.toFixed(2);
               },
               err => {
                  if (err.status == 400035) {
                     return this.$router.go(-1);
                  }
               });
         },
         async submitOrder() {
            if (this.defaultAddress == null) {
               Toast('请先添加地址');
               return;
            }

            let product = this.confirmSelectedProduct.goodsList[0].sizeList[0];
            let params = {
               cartId: product.cartId,
               userId: this.userId,
               addressId: this.defaultAddress.id,
               orderTotalMoney: this.totalFee,
               payPassageway: this.payPassageway,
               uId: product.uId,
               orderRemark: encodeURI(this.orderRemark),
               orderType: this.orderType
            }

            this.$store.dispatch('CreateOrder', params).then(response => {
               if (response.status == 200) {
                  this.$router.push({
                     name: 'pay',
                     query: {
                        orderid: response.data.orderId
                     }
                  })
               }
            })
         },

      },
      mounted() {
         //刷新当前页面
     
         this.initData();
         window.onresize = () => {
            return (() => {
               window.screenHeight = document.body.clientHeight;
               this.showHeight = window.screenHeight;
            })()
         }
      }
   }
</script>
<style lang="scss" scoped>

</style>